import { Flex, Typography } from "antd"
import { FC } from "react"

import { useLocale } from "@/locales"

const LoginSummary: FC<any> = props => {
	const { total, successed, failed } = props
	const { formatMessage } = useLocale()
	return (
		<Flex gap="large" align="center" justify="center">
			<Flex gap="small">
				<Typography.Text strong>{formatMessage({ id: "report.total_login" })} </Typography.Text>
				<Typography.Text strong>{total}</Typography.Text>
				<Typography.Text strong>{formatMessage({ id: "report.ci" })}</Typography.Text>
			</Flex>
			<Flex gap="small">
				<Typography.Text strong>{formatMessage({ id: "report.login_successed" })}</Typography.Text>
				<Typography.Text strong style={{ color: "green" }}>
					{successed}
				</Typography.Text>
				<Typography.Text strong>{formatMessage({ id: "report.ci" })}</Typography.Text>
			</Flex>
			<Flex gap="small">
				<Typography.Text strong>{formatMessage({ id: "report.login_failed" })}</Typography.Text>
				<Typography.Text strong style={{ color: "red" }}>
					{failed}
				</Typography.Text>
				<Typography.Text strong>{formatMessage({ id: "report.ci" })}</Typography.Text>
			</Flex>
		</Flex>
	)
}

export default LoginSummary
